<template>
	<view class="content">
		<view class="address-order">
			<view class="address" v-if="cabinet!=''">
				<view class="name">
					<image src="https://www.sdxiecheng.cn//img/myaddress.png" mode=""></image>
					<text>鞋柜编号：{{ cabinet.name }}</text>
				</view>
				<view class="address-des">
					地址：{{cabinet.address}}
				</view>
			</view>
			<view class="order">
				<view class="order-li" v-for="(item,index) in goods" :key='index'>
					<image :src="'https://www.sdxiecheng.cn/'+item.image" mode=""></image>
					<view class="order-li-right">
						<view class="name">{{ item.name }}</view>
						<view class="des">{{ item.describle }}</view>
						<view class="price">¥{{ item.price }} <text style="margin-left: 20rpx;"
								v-if="item.member_price">会员价：¥{{ item.member_price }}</text></view>
					</view>
				</view>
			</view>


		</view>
		<view class="order-info">
			<view class="order-info-li">
				<view>商品总额</view>
				<text>￥{{ totalPrice }}</text>
			</view>
			<view class="order-info-li" v-if="coupon.length > 0" @click="couponShow = true">
				<view class="youhui">
					优惠券 <text>{{ coupon.length }}个可用</text>
				</view>
				<view style="display: flex;align-items: center;">
					<text class="youhui-text" v-if="youhuiPrice > 0"> -￥{{youhuiPrice}} </text>
					<u-icon name="arrow-right" color="#333" size="28"></u-icon>
				</view>

			</view>
			<view class="order-info-li shuxiang">
				<view class="name">备注</view>
				<textarea v-model="remark" />
			</view>
			<view class="order-info-li shuxiang">
				<view class="name">上传附件</view>
				<u-upload ref="uUpload" max-count="1" :action="action" @on-success="success" @on-remove="remove"
					width="160" height="160"></u-upload>
			</view>

		</view>
		<!-- 底部按钮 -->
		<view class="order-bottom-box">
			<view class="order-bottom-info">
				<view class="price">
					实付金额：
					<text>¥{{ paidAmount }}</text>
				</view>
				<button class="u-reset-button" @click="isPay()">付款</button>

			</view>
		</view>
		<!-- //手机号授权 -->
		<u-popup v-model="show" mode="bottom">
			<view style="height: 181px; display: flex;align-items: center;justify-content: center;">
				<view style="text-align: center;">
					<text style="display: block;padding: 32px;"> 您未授权使用手机号，商家无法联系您，请尽快授权手机号！</text>
					<u-button size="medium" class="u-reset-button pay-btn" open-type="getPhoneNumber" type="success"
						@getphonenumber="getphone">授权</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 优惠券弹窗 -->
		<u-popup v-model="couponShow" mode="bottom" :closeable="true">
			<view class="coupon-box">
				<view class="coupon-title">选择优惠券</view>
				<scroll-view scroll-y="true" style="height: 400rpx;">
					<u-radio-group :wrap="true" active-color="#FF9A33" v-model="couponValue" @change="radioGroupChange">
						<u-radio v-for="(item, index) in couponList" :key="index" :name="index">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</scroll-view>
				<button class="u-reset-button" @click="couponShow = false">确定</button>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shoecabinet_id: '',
				couponValue: -1,
				good_id: '',
				cabinet: '',
				coupon: [],
				couponShow: false,
				goods: [],
				remark: '',
				order_id: '',
				enclosure_images: [],
				action: 'https://www.sdxiecheng.cn/index.php/index/ajax/upload',
				cartList: [],
				cartNumList: [],
				buy_type: 'alone',
				userInfo: '',
				couponList: [],
				couponInfo: {},
				youhuiPrice: 0,
				show: false
			}
		},
		onLoad(e) {
			this.getUserInfo()

			if (e.list) {

				if (e.good_num) {
					console.log(JSON.parse(e.list))
					this.cartList = JSON.parse(e.list)
					this.cartNumList = JSON.parse(e.good_num)
					this.shoecabinet_id = e.shoecabinet_id
					this.buy_type = 'cart'
					this.getOrderCartInfos()
				} else {
					console.log(JSON.parse(e.list))
					this.cartList = JSON.parse(e.list)
					this.shoecabinet_id = e.shoecabinet_id
					this.buy_type = 'cart'
					this.getOrderCartInfo()
				}
			} else {
				this.shoecabinet_id = e.shoecabinet_id
				this.good_id = e.id
				this.buy_type = 'alone'
				this.getOrderInfo()
			}

		},
		computed: {
			totalPrice() {
				let num = 0
				this.goods.forEach(item => {
					if (item.member_price) {
						num += item.member_price
					} else {
						num += item.price - 0
					}
				})
				return parseFloat(num).toFixed(2)
			},
			paidAmount() {
				let num = 0
				this.goods.forEach(item => {
					if (item.member_price) {
						if (item.good_num) {
							num += item.member_price * (item.good_num - 0)
						} else {
							num += item.member_price
						}
					} else {
						if (item.good_num) {
							num += (item.price - 0) * (item.good_num - 0)
						} else {
							num += item.price - 0
						}

					}

				})
				return parseFloat(num - this.youhuiPrice).toFixed(2)
			},
			paidAmounts() {
				let num = 0
				this.goods.forEach(item => {
					if (item.good_num) {
						num += (item.price - 0) * (item.good_num - 0)
					} else {
						num += item.price - 0
					}
				})
				return parseFloat(num).toFixed(2)
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				uni.$u.http.post('user/userinfo', {
					openid: uni.getStorageSync('openid')
				}).then(res => {
					console.log(res)
					this.userInfo = res.data
				})
			},
			isPay() {

				let that = this
				if (!uni.getStorageSync('phoneNumber')) {
					this.show = true;
				} else {
					if (this.cartNumList.length > 0) {
						this.generateOrders()
					} else {
						this.generateOrder()
					}
				}



				// this.zhifu()

			},
			success(e) {
				console.log(e)
				this.enclosure_images.push(e.data.fullurl)
			},
			remove(index, lists, name) {
				this.enclosure_images.splice(index, 1)
				console.log(index, lists, name)
			},
			// 计算订单
			generateOrder() {
				let that = this
				let goodidList = []
				that.cartList.forEach(item => {
					goodidList.push(item.id)
				})
				uni.request({
					url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/create_order',
					
					// url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/create_order',
					method: 'POST',
					data: {
						shoecabinet_id: that.$store.state.shoecabinet_id,
						user_id: uni.getStorageSync('userId'),
						openid: uni.getStorageSync('openid'),
						good_id: that.good_id,
						amount: this.paidAmounts,
						type: 'shoe',
						coupon_id: this.couponInfo.id,
						coupon_type: this.couponInfo.coupon_type,
						coupon_fee: this.couponInfo.amount,
						remark: this.remark,
						order_id: this.order_id,
						enclosure_images: this.enclosure_images.join(','),
						buy_type: this.buy_type,
						cart_id: goodidList.join(',')
					},
					success: (res) => {
						console.log(res.data, '生成订单');
						this.order_id = res.data.data.order_id
						uni.redirectTo({
							url: '../payment/payment?order_id=' + this.order_id + '&amount=' + this
								.paidAmount + '&detail_id=' + res.data.data.order_detail_id
						})
						// this.zhifu()
						// that.cabinet = res.data.data.cabinet
						// that.coupon = res.data.data.coupon
						// that.goods = res.data.data.goods
					}
				});
			},
			// 计算订单
			generateOrders() {
				let that = this
				let goodidList = []
				// that.cartList.forEach(item =>{
				// 	goodidList.push(item.id)
				// })
				uni.request({
					url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/create_orders',
					method: 'POST',
					data: {
						shoecabinet_id: that.$store.state.shoecabinet_id,
						user_id: uni.getStorageSync('userId'),
						openid: uni.getStorageSync('openid'),
						// good_id:that.good_id,
						amount: this.paidAmounts,
						type: 'shoe',
						coupon_id: this.couponInfo.id,
						coupon_type: this.couponInfo.coupon_type,
						coupon_fee: this.couponInfo.amount,
						remark: this.remark,
						order_id: this.order_id,
						enclosure_images: this.enclosure_images.join(','),
						buy_type: this.buy_type,
						good_id: this.cartList.join(','),
						good_num: this.cartNumList.join(',')
					},
					success: (res) => {
						console.log(res.data, '生成订单');
						this.order_id = res.data.data.order_id
						uni.redirectTo({
							url: '../payment/payment?order_id=' + this.order_id + '&amount=' + this
								.paidAmount + '&detail_id=' + res.data.data.order_detail_id
						})
						// this.zhifu()
						// that.cabinet = res.data.data.cabinet
						// that.coupon = res.data.data.coupon
						// that.goods = res.data.data.goods
					}
				});
			},
			// 获取订单信息接口
			getOrderInfo() {
				let that = this
				uni.request({
					
					url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/submit_info',
					
					// url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/submit_info',
					method: 'POST',
					data: {
						user_id: uni.getStorageSync('userId'),
						openid: uni.getStorageSync('openid'),
						shoecabinet_id: that.$store.state.shoecabinet_id,
						good_id: that.good_id
					},
					success: (res) => {
						console.log(res.data);
						that.cabinet = res.data.data.cabinet
						that.coupon = res.data.data.coupon
						that.couponList = [...that.coupon, {
							name: '不使用优惠券'
						}]
						that.goods = res.data.data.goods
						// that.generateOrder()
					}
				});
			},
			// 获取购物车订单信息
			getOrderCartInfo() {
				let that = this
				let goodidList = []
				that.cartList.forEach(item => {
					goodidList.push(item.shoe_id)
				})
				uni.request({
					url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/submit_info',
					method: 'POST',
					data: {
						user_id: uni.getStorageSync('userId'),
						openid: uni.getStorageSync('openid'),
						shoecabinet_id: that.shoecabinet_id,
						good_id: goodidList.join(',')
					},
					success: (res) => {
						if (res.data.code == 200) {
							console.log(res.data);
							that.cabinet = res.data.data.cabinet
							that.coupon = res.data.data.coupon
							that.couponList = [...that.coupon, {
								name: '不使用优惠券'
							}]

							that.goods = res.data.data.goods
						} else {
							uni.showModal({
								title: '温馨提示',
								content: res.data.msg,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
										uni.navigateBack({
											delta: 1
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
						// that.generateOrder()
					}
				});
			},
			// 提交购物车信息2 
			getOrderCartInfos() {
				let that = this
				let goodidList = []
				// that.cartList.forEach(item =>{
				// 	goodidList.push(item.shoe_id)
				// })
				// this.cartNumList
				uni.request({
					url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/submit_infos',
					// url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/submit_infos',
					method: 'POST',
					data: {
						user_id: uni.getStorageSync('userId'),
						openid: uni.getStorageSync('openid'),
						shoecabinet_id: that.shoecabinet_id,
						good_id: this.cartList.join(','),
						good_num: this.cartNumList.join(',')
					},
					success: (res) => {
						console.log(res.data);
						if (res.data.code == 200) {
							that.cabinet = res.data.data.cabinet
							that.coupon = res.data.data.coupon
							that.couponList = [...that.coupon, {
								name: '不使用优惠券'
							}]
							that.goods = res.data.data.goods
						} else {
							uni.showModal({
								title: '温馨提示',
								content: res.data.msg,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
										uni.navigateBack({
											delta: 1
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}

						// that.generateOrder()
					},
				});
			},
			// 优惠券选择
			radioGroupChange(index) {
				console.log(index)
				this.couponInfo = this.couponList[index]
				if (this.couponList[index].amount - 0 > 0) {
					this.youhuiPrice = this.couponList[index].amount - 0
				} else {
					this.youhuiPrice = 0
				}

				console.log(this.couponInfo)
			},
			getphone(e) {
				if (!e.detail.iv) {
					uni.showToast({
						title: '获取手机号失败',
						icon: 'none'
					})
					return;
				}
				var that = this;
				uni.login({
					provider: 'weixin',
					success(res) {
						let code = res.code;
						var obj = {
							code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						}
						that.decryptPhone(obj);
					}
				})
			},
			decryptPhone(obj) {
				uni.$u.http.post('user/getMobile', obj).then(res => {
					// console.log(res.data)
					this.postPhone(res.data.phoneNumber)
					// this.postPhone()
				})
			},
			// 提交手机号
			postPhone(phone) {

				uni.$u.http.post('user/binding', {
					mobile: phone,
					// openid: uni.getStorageSync('openid')
				}).then(res => {
					// console.log(res, '授权  ')

					uni.setStorageSync('phoneNumber', phone)
					uni.showToast({
						icon: 'success',
						title: '授权成功'
					})
					this.show = false;


				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.msg
					})
				})
			}

		}
	}
</script>

<style lang="less">
	.content {
		padding: 10rpx 20rpx;
	}

	.address-order {
		background: #FFFFFF;
		border-radius: 10rpx;

		.address {
			padding: 30rpx;
			padding-bottom: 40rpx;
			background: url('https://www.sdxiecheng.cn//img/address-line.png') bottom no-repeat;
			background-size: 100%;

			.name {
				image {
					width: 24rpx;
					height: 30rpx;
					margin-right: 19rpx;
				}

				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 27rpx;
			}

			.address-des {
				color: 24rpx;
				color: #666666;
			}
		}
	}

	// 订单样式
	.order {
		padding: 0 9rpx;
		padding-top: 34rpx;

		.order-li {
			display: flex;
			align-items: center;
			padding-bottom: 35rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.order-li-right {
				width: calc(100% - 150rpx);
				padding-left: 20rpx;

				.name {
					font-size: 30rpx;
				}

				.des {
					font-size: 24rpx;
					margin-top: 9rpx;
					margin-bottom: 9rpx;
				}

				.price {
					font-size: 26rpx;
					font-weight: 500;
					color: #FF9A33;
				}
			}
		}
	}

	// 订单信息
	.order-info {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 39rpx 21rpx;
		margin-bottom: calc(39rpx + 98rpx);

		.order-info-li {
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				font-size: 26rpx;

			}

			.youhui {
				text {
					color: #FF9A33;
					font-size: 20rpx;
					font-weight: 500;
					line-height: 36rpx;
					background: #FCF4F5;
					padding: 0 8rpx;
					margin-left: 10rpx;
				}
			}

			margin-bottom: 45rpx;

			textarea {
				background: #F5F5F5;
				border-radius: 10rpx;
				width: 100%;
				height: 100rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}

		.shuxiang {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			.name {
				margin-bottom: 20rpx;
			}
		}
	}

	// 底部按钮
	.order-bottom-box {
		width: 100%;
		height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #FFFFFF;
		padding: 0 30rpx;

		.order-bottom-info {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				font-size: 34rpx;
				font-weight: 500;

				text {
					color: #FF9A33;
				}
			}

			button {
				margin: 0;
				width: 200rpx;
				height: 70rpx;
				border-radius: 35rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FF9A33;
			}
		}
	}

	// 优惠券弹窗
	.coupon-box {
		padding: 30rpx;

		.coupon-title {
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 1.5;
			margin-bottom: 30rpx;
		}

		/deep/ .u-radio__label {
			// font-size: 20rpx !important;
			color: #000000 !important;
		}

		button {
			margin: 0;
			width: 100%;
			height: 70rpx;
			border-radius: 35rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FF9A33;
		}
	}

	.youhui-text {
		color: #FF9A33;
	}

	/deep/.u-radio {
		line-height: 2 !important;
	}
</style>
